<script setup>
import { ref, watch } from 'vue';
import { CommentOwn, reasonList } from '../common.js';

const props = defineProps(['visible', 'all', 'onJudge']);
const emit = defineEmits(['update:visible', 'judge']);

const QuesOrPkgKey = all => all ? 'wholePackagePass' : 'pass';
const RejectPair = k => ({ [k]: false });

const sending = ref(false);

const visible = ref(props.visible);
watch(visible, newVal => emit('update:visible', newVal));

const formElem = ref();

const formState = ref(CommentOwn());

function handleJudge() {
  sending.value = true;

  const Params = R.compose( R.mergeRight(formState.value), RejectPair, QuesOrPkgKey );
  props.onJudge( Params(props.all) )
  .then(() => visible.value = false)
  .finally(() => sending.value = false);
}

function cancel() {
  visible.value = false;
}

function confirm() {
  formElem.value
  .validate()
  .then(handleJudge)
  .catch(() => {});
}
</script>

<template>
  <a-modal
    :visible="visible"
    :width="400"
    centered
    :title="`${ props.all ? '整包' : '' }驳回`"
    :closable="false"
    class="judge-modal">

    <a-form
      ref="formElem"
      :model="formState"
      layout="vertical">
      <a-form-item required label="错误原因" name="rejectReason">
        <a-radio-group v-model:value="formState.rejectReason">
          <template v-for="item in reasonList">
            <a-radio-button :value="item">{{ item }}</a-radio-button>
          </template>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="详细描述" name="remark">
        <a-textarea
          v-model:value="formState.remark"
          :auto-size="{ minRows: 3 }"
          placeholder="请输入详细错误原因"
          show-count
          :maxlength="100"
        >
        </a-textarea>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" :disabled="sending" @click="confirm">确定</a-button>
    </template>
  </a-modal>
</template>

<style>
.judge-modal .ant-modal-footer { text-align: center; }
</style>
